<template>
  <view class="bx-radio" :style="[radioStyle]" :class="[radioButtonClass]" @tap="toggle">

    <view class="bx-radio-icon" :style="{
			'width':elIconSize+'px','height':elIconSize+'px'
		}" :class="{ checked: name === parentData.value, 'has-char': serialChar, 'no-char': !serialChar}">
      <text v-if="serialChar">{{ serialChar }}</text>
      <text v-if="!serialChar && name === parentData.value" class="bx-radio-checked"></text>
    </view>

    <view class="bx-radio__label" :style="[buttonStyle]" hover-class="active"
      :class="{ checked: checked, disabled: disabled }">
      <slot />
    </view>
  </view>
</template>

<script>
  /**
   * radio 单选框
   * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配bx-radio-group使用
   * @property {String Number} icon-size 图标大小，单位rpx（默认24）
   * @property {String Number} label-size label字体大小，单位rpx（默认28）
   * @property {String Number} name radio组件的标示符
   * @property {String} shape 形状，见上方说明（默认circle）
   * @property {Boolean} disabled 是否禁用（默认false）
   * @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true）
   * @property {String} active-color 选中时的颜色，如设置parent的active-color将失效
   * @event {Function} change 某个radio状态发生变化时触发(选中状态)
   * @example <bx-radio :label-disabled="false"></bx-radio>
   */
  export default {
    name: 'bx-radio',
    props: {
      // radio的名称
      name: {
        type: [String, Number],
        default: ''
      },
      // 形状，square为方形，circle为原型
      shape: {
        type: String,
        default: ''
      },
      // 是否禁用
      disabled: {
        type: [String, Boolean],
        default: ''
      },
      // 是否禁止点击提示语选中复选框
      labelDisabled: {
        type: [String, Boolean],
        default: ''
      },
      // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
      activeColor: {
        type: String,
        default: ''
      },
      // 图标的大小，单位rpx
      iconSize: {
        type: [String, Number],
        default: ''
      },
      // label的字体大小，rpx单位
      labelSize: {
        type: [String, Number],
        default: ''
      },
      // 序号
      serialChar: {
        type: [String, Number],
        default: ''
      },
      wrap: {
        type: [String, Boolean],
        default: ''
      },
      allowCanel: { //允许取消选中
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
        // 故只能使用如此方法
        parentData: {
          iconSize: null,
          labelDisabled: null,
          disabled: null,
          shape: null,
          activeColor: null,
          activeBg: null,
          size: null,
          width: null,
          height: null,
          value: null,
          wrap: null
        }
      };
    },
    computed: {
      theme() {
        return this.$store?.state?.app?.theme
      },
      checked() {
        // 是否选中
        return this.parent.value === this.name;
      },
      // 是否禁用，如果父组件bx-raios-group禁用的话，将会忽略子组件的配置
      elDisabled() {
        return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData
          .disabled : false;
      },
      // 是否禁用label点击
      elLabelDisabled() {
        return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this
          .parentData.labelDisabled : false;
      },
      // 组件尺寸，对应size的值，默认值为34rpx
      elSize() {
        return this.size ? this.size : this.parentData.size ? this.parentData.size : 34;
      },
      // 组件的勾选图标的尺寸，默认20
      elIconSize() {
        return this.iconSize ? this.iconSize : this.parentData.iconSize ? this.parentData.iconSize : 20;
      },
      // 组件选中激活时的颜色
      elActiveColor() {
        return this.activeColor ? this.activeColor : this.parentData.activeColor ? this.parentData.activeColor :
          'primary';
      },
      elActiveBg() {
        return this.activeBg ? this.activeBg : this.parentData.activeBg ? this.parentData.activeBg :
          'primary';
      },
      // 组件的形状
      elShape() {
        return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : 'circle';
      },
      buttonStyle() {
        let style = {};
        if (this.checked) {
          if (this.elActiveColor) {
            style['color'] = this.elActiveColor
            style['border-color'] = this.elActiveColor
          }
          if (this.elActiveBg) {
            style['background-color'] = this.elActiveBg
          }
        }
        return style
      },
      radioStyle() {
        let style = {};
        if (this.parentData.width) {
          style.width = this.$u.addUnit(this.parentData.width);
          // #ifdef MP
          // 各家小程序因为它们特殊的编译结构，使用float布局
          style.float = 'left';
          // #endif
          // #ifndef MP
          // H5和APP使用flex布局
          style.flex = `0 0 ${this.$u.addUnit(this.parentData.width)}`;
          // #endif
        }
        if (this.parentData.wrap) {
          style.width = '100%';
          // #ifndef MP
          // H5和APP使用flex布局，将宽度设置100%，即可自动换行
          style.flex = '0 0 100%';
          // #endif
        }
        style['max-width'] = '100%'


        return style;
      },
      radioButtonClass() {
        let res = ''
        if (this.parent && (this.parent.radioMode || this.parent.mode)) {
          if (this.parent.radioMode === 'button' || this.parent.mode === 'button') {
            res = 'button-mode';
          }
        }
        // if (this.theme) {
        //   res += ` theme-${this.theme}`
        // }
        return res
      }
    },
    created() {
      this.parent = false;
      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
      this.getParentData('bx-radio-group');
      if (this.parent) {
        this.parent.children.push(this);
      }
    },
    methods: {
      getParentData(parentName = '') {
        // 避免在created中去定义parent变量
        if (!this.parent) this.parent = false;
        // 这里的本质原理是，通过获取父组件实例(也即bx-radio-group的this)
        // 将父组件this中对应的参数，赋值给本组件(bx-radio的this)的parentData对象中对应的属性
        // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
        this.parent = this.theParent.call(this, parentName);
        if (this.parent) {
          // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
          Object.keys(this.parentData).map(key => {
            this.parentData[key] = this.parent[key];
          });
        }
      },
      theParent(name = undefined) {
        let parent = this.$parent;
        // 通过while历遍，这里主要是为了H5需要多层解析的问题
        while (parent) {
          // 父组件
          if (parent.$options && parent.$options.name !== name) {
            // 如果组件的name不相等，继续上一级寻找
            parent = parent.$parent;
          } else {
            return parent;
          }
        }
        return false;
      },
      onClickLabel() {
        if (!this.elLabelDisabled && !this.elDisabled) {
          this.setRadioCheckedStatus();
        }
      },
      toggle() {
        if (!this.elDisabled) {
          this.setRadioCheckedStatus();
        }
      },
      emitEvent() {
        // bx-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
        if (this.parentData.value != this.name) {
          this.$emit('change', this.name);
        }
      },
      updateParentData(value){
        this.parentData.value = value;
      },
      // 改变组件选中状态
      // 这里的改变的依据是，更改本组件的parentData.value值为本组件的name值，同时通过父组件遍历所有bx-radio实例
      // 将本组件外的其他bx-radio的parentData.value都设置为空(由computed计算后，都被取消选中状态)，因而只剩下一个为选中状态
      setRadioCheckedStatus() {

        this.emitEvent();

        if (this.parent) {
          if (this.parentData.value != this.name) {
            this.parent.setValue(this.name);
            this.parentData.value = this.name;
          } else {
            if (this.allowCanel) {
              this.parent.setValue(null);
              this.parentData.value = null;
            }

          }
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .bx-radio {
    display: flex;
    align-items: center;
    padding: 10rpx;

    .bx-radio-icon {
      width: 40rpx;
      height: 40rpx;
      border-radius: 60rpx;
      border: 2rpx solid #c8c9cc;
      color: #888;
      margin-right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;

      &.checked.has-char {
        border: none;
        background-color: #007aff;
        color: #fff;
      }

      &.checked.no-char {
        border-color: #007aff;
        border-width: 4rpx;

        .bx-radio-checked {
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          border-radius: 12rpx;
          background-color: #007aff;
        }
      }
    }

    .bx-radio__label {
      padding-right: 50rpx;
      position: relative;
      flex: 1;
      min-width: 50px;
      text-align: center;
      font-size: 16px;
      
      &::before {
        position: absolute;
        content: '';
        width: 120%;
        top: -10%;
        left: -10%;
        height: 120%;
      }
    }

    &.button-mode {
      margin-right: 20rpx;
      margin-top: 10rpx;
      padding: 0;
      min-width: 50px;
      text-align: center;

      .bx-radio-icon {
        display: none;
      }

      .bx-radio__label {
        color: #333;
        background-color: #f8f8fa;
        border: 1px solid #f1f1f1;
        border-radius: 30rpx;
        letter-spacing: 1px;
        transition: all 0.5s;
        padding: 5px 15px;
        &.active {
          transform: scale(1.1);
        }

        &.checked {
          border-color: #0bc99d;
          color: #0bc99d;
          background-color: rgba(11, 201, 157, 0.1);
        }

        &.disabled {
          color: #fff;
          background-color: #a0cfff;
          border-color: #a0cfff;

          &:active {
            pointer-events: none;
            transform: scale(1);
          }
        }
      }
    }
  }
</style>
